<script setup>
import VAsideBar from "./VAsiderBar.vue";
import VHeader from "./VHeader.vue";
</script>

<template>
  <div class="main-layout-container">
    <el-container>
      <el-aside width="200px" class="v-layout-aside">
        <!-- 左侧菜单栏区域 -->
        <v-aside-bar/>
      </el-aside>
      <el-container>
        <el-header class="v-layout-header">
          <!-- 头部区域 -->
          <v-header/>
        </el-header>
        <!-- 内容区域，一般是动态显示组件内容的 -->
        <el-main class="v-layout-main">
          <!-- 使用 router-view 渲染组件 -->
          <router-view v-slot="{ Component }">
            <!--  组件切换的时候，加上过渡效果  -->
            <transition>
              <div>
                <!--   这里显示具体的组件内容   -->
                <component :is="Component"/>
              </div>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.main-layout-container {
  height: 100vh;
  overflow: hidden;
  background-color: lightcyan;
}

.v-layout-aside {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background-color: lightyellow;
}

.v-layout-header {
  height: 50px;
  box-sizing: border-box;
  background-color: lightcoral;
}

.v-layout-main {
  height: calc(100vh - 60px);
}
</style>